<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:sec="http://www.springframework.org/security/facelets/tags"
	xmlns:p="http://primefaces.org/ui" lang="en" class="no-js">

<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6 lt8"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="no-js ie7 lt8"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="no-js ie8 lt8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<!--<![endif]-->
<h:head>
	<meta charset="UTF-8" />
	<!-- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  -->
	<title>Login and Registration Form with HTML5 and CSS3</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta name="description" content="" />
	<meta name="keywords" content="html5, css3, form, switch, animation, :target, pseudo-class" />
	<meta name="author" content="" />
	<link rel="shortcut icon" href="../favicon.ico" />
	<link rel="stylesheet" type="text/css" href="css/demo.css" />
	<link rel="stylesheet" type="text/css" href="css/style3.css" />
	<link rel="stylesheet" type="text/css" href="css/animate-custom.css" />
</h:head>
<h:body>
	<div class="container">
		<!-- Codrops top bar -->
		<div class="codrops-top">
			<a href=""> <strong>Home: </strong>Voltar para Home </a> <span
				class="right"> <a
				href=" http://tympanus.net/codrops/2012/03/27/login-and-registration-form-with-html5-and-css3/">
					<strong>Área restrita para estabelecimento</strong> </a> </span>
			<div class="clr"></div>
		</div>
		<!--/ Codrops top bar -->
		<header> </header>
		<section>
			<div id="container_demo">
				<!-- hidden anchor to stop jump http://www.css3create.com/Astuce-Empecher-le-scroll-avec-l-utilisation-de-target#wrap4  -->
				<div id="wrapper">
				 	
					<div id="login" class="animate form">
						<h:form>
							<h1>Log in</h1>
							<p:messages  showDetail="true" showSummary="true"  />
							<p>
								<label for="username" class="uname" data-icon="u">
									Usuário</label> <h:inputText id="j_username" name="username"
									 value="#{usuarioMB.login}"/>
							</p>
							<p>
								<label for="password" class="youpasswd" data-icon="p">
									Senha </label> <p:password id="j_password" name="password"
									 value="#{usuarioMB.senha}"/>
							</p>
							<p class="login button">
            						<h:commandButton  value="Logar" action="#{usuarioMB.efetuarLogin}"/>
            						<h:commandButton value="Voltar" action="principal.jsf"  />
            						
							</p>
							<p class="change_link">
								<a href="cadastro-cliente.jsf" class="to_register">Cadastre-se</a>
								<a href="recupera-dados.jsf" class="to_register">Esqueci meu Usuário ou Senha</a>
							</p>
						</h:form>
					</div>
					

				</div>

			</div>
		</section>
	</div>

</h:body>
</html>